<!-- 用来做测试的页面 -->
<template>
<div>
    <h1>这是一个测试页面</h1>
    <el-upload class="upload-demo" multiple :http-request="imageChange" action="/" list-type="picture-card" :on-preview="handlePictureCardPreview">
        <i class="el-icon-upload"></i>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <!--图片预览-->
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="coverUrl" alt="">
    </el-dialog>
</div>
</template>

<script>
import axios from 'axios'
export default {

    data() {
        return {
            coverUrl: '',
            dialogVisible: false
        }
    },
    methods: {
        handlePictureCardPreview(file) {
            this.dialogVisible = true;
        },
        // 提交图片
        imageChange(param, type) {
            // console.log(param);
            let formData = new FormData()
            formData.append('file', param.file)
            // formData.append("upload", 'upload')
            axios.post('http://localhost:8080/upload/postImage/', formData).then(res => {
                console.log(res);
                if (res.data.code == 200) {
                    this.coverUrl = res.data.url;
                    alert("上传成功");
                    console.log(res.data.url);
                }

            });
        },

    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {

    }
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
